<template>
  <div class="dingdan-card">
    <el-tabs v-model="activeIndex" type="border-card" @tab-click="handleClick">
      <!-- 所有订卡片区 -->
      <el-tab-pane label="所有订单" name="1">
        <!-- 所有订单表 -->
        <div class="dingdan-table">
          <el-table border align="center" header-align="center" :data="allOrder">
            <el-table-column label="创建时间" width="100" prop="createTime"></el-table-column>
            <el-table-column label="编号" width="50" prop="id"></el-table-column>
            <el-table-column label="宝贝" width="200" prop="productName"></el-table-column>
            <el-table-column label="收货人" width="100" prop="acceptName"></el-table-column>
            <el-table-column label="手机" width="150" prop="acceptPhone"></el-table-column>
            <el-table-column label="收货地址" width="300" prop="accpetAddress"></el-table-column>
            <el-table-column label="状态" width>
              <template slot-scope="scope">
                <p v-if="scope.row.isPay == 0">未付款</p>
                <p v-else-if="scope.row.isSend == 0">已付款</p>
                <p v-else-if="scope.row.isAccept == 0">已发货</p>
                <p v-else>已收货</p>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-tab-pane>

      <!-- 所有待付款订单 -->
      <el-tab-pane label="待付款" name="2">
        <!-- 所有待付款订单 -->
        <div class="no-pay-dingdan-table">
          <el-table border align="center" header-align="center" :data="NoPayOrder">
            <el-table-column label="创建时间" width="100" prop="createTime"></el-table-column>
            <el-table-column label="编号" width="50" prop="id"></el-table-column>
            <el-table-column label="宝贝" width="200" prop="productName"></el-table-column>
            <el-table-column label="收货人" width="100" prop="acceptName"></el-table-column>
            <el-table-column label="手机" width="150" prop="acceptPhone"></el-table-column>
            <el-table-column label="收货地址" width="300" prop="accpetAddress"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  v-if="scope.row.isPay == 0"
                  @click="pay(scope.$index,scope.row.id)"
                >确认付款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 所有待发货订单 -->
      <el-tab-pane label="待发货" name="3">
        <!-- 所有待发货订单表格 -->
        <div class="no-deliver-dingdan-table">
          <el-table border align="center" header-align="center" :data="NoDeliverOrder">
            <el-table-column label="创建时间" width="100" prop="createTime"></el-table-column>
            <el-table-column label="编号" width="50" prop="id"></el-table-column>
            <el-table-column label="宝贝" width="200" prop="productName"></el-table-column>
            <el-table-column label="收货人" width="100" prop="acceptName"></el-table-column>
            <el-table-column label="手机" width="150" prop="acceptPhone"></el-table-column>
            <el-table-column label="收货地址" width="300" prop="accpetAddress"></el-table-column>
            <el-table-column label="状态" width>
              <template slot-scope="scope">
                <p v-if="scope.row.isPay == 0">未付款</p>
                <p v-else-if="scope.row.isSend == 0">已付款</p>
                <p v-else-if="scope.row.isAccept == 0">已发货</p>
                <p v-else>已收货</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 所有待收货订单 -->
      <el-tab-pane label="待收货" name="4">
        <!-- 所有待收货订单表格 -->
        <div class="no-accept-dingdan-table">
          <el-table border align="center" header-align="center" :data="NoAcceptOrder">
            <el-table-column label="创建时间" width="100" prop="createTime"></el-table-column>
            <el-table-column label="编号" width="50" prop="id"></el-table-column>
            <el-table-column label="宝贝" width="200" prop="productName"></el-table-column>
            <el-table-column label="收货人" width="100" prop="acceptName"></el-table-column>
            <el-table-column label="手机" width="150" prop="acceptPhone"></el-table-column>
            <el-table-column label="收货地址" width="300" prop="accpetAddress"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" @click="accept(scope.$index,scope.row.id)">确认收货</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 所有待评价订单 -->
      <el-tab-pane label="可评价" name="5">
        <!-- 所有待评价订单表格 -->
        <div class="no-evaluate-dingdan-table">
          <el-table border align="center" header-align="center" :data="NoEvaluateOrder">
            <el-table-column label="创建时间" width="100" prop="createTime"></el-table-column>
            <el-table-column label="编号" width="50" prop="id"></el-table-column>
            <el-table-column label="宝贝" width="200" prop="productName"></el-table-column>
            <el-table-column label="收货人" width="100" prop="acceptName"></el-table-column>
            <el-table-column label="手机" width="150" prop="acceptPhone"></el-table-column>
            <el-table-column label="收货地址" width="300" prop="accpetAddress"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" @click="handleEvaluateDialog(scope.row.shangpinId)">去评价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="请输入您的建议" :visible.sync="evaluateVisible" width="30%">
      <el-form v-model="commentForm">
        <el-form-item label="评论">
          <el-input type="textarea" v-model="commentForm.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendComment()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      currentPage: 1,
      evaluateVisible: false,

      // 所有订单
      allOrder: [],

      // 没有付款订单
      NoPayOrder: [],

      // 没有发货订单
      NoDeliverOrder: [],

      // 没有收获订单
      NoAcceptOrder: [],

      // 没有评价订单
      NoEvaluateOrder: [],

      commentForm: {
        productId: 0,
        content: ""
      }
    };
  },
  mounted() {
    this.currentPage = 1;
    this.getMyOrderList(this.currentPage);
  },
  methods: {
    handleClick(tab, event) {},

    // 确认付款
    pay(index, id) {
      this.$confirm("确定付款？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const { data: res } = await this.$http.post("/user/pay", {
          orderId: id
        });
        // console.log(res);
        if (res.code == 200) {
          this.NoPayOrder.splice(index, 1);
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.getMyOrderList(this.currentPage);
        } else {
          this.$notify.error({
            title: "错误",
            message: res.message
          });
        }
      });
    },

    // 确认收货
    accept(index, id) {
      this.$confirm("确定收获？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const { data: res } = await this.$http.post("/user/accept", {
          orderId: id
        });
        console.log(res);
        if (res.code == 200) {
          this.NoAcceptOrder.splice(index, 1);
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.getMyOrderList(this.currentPage);
        } else {
          this.$notify.error({
            title: "错误",
            message: res.message
          });
        }
        // console.log(id);
      });
    },
    // 换页
    handleCurrentChange(val) {
      // console.log(val);
      this.currentPage = val;
      this.getMyOrderList(val);
    },
    handleEvaluateDialog(id) {
      this.evaluateVisible = true;
      this.commentForm.productId = id;
    },
    async sendComment() {
      this.evaluateVisible = false;
      //   console.log(this.commentForm.productId);
      //   console.log(this.commentForm.content);

      const { data: res } = await this.$http.post(
        "/user/comment",
        this.commentForm
      );
      if (res.code == 200) {
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success"
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: res.message
        });
      }
    },
    async getMyOrderList(val) {
      this.NoDeliverOrder = [];
      this.NoPayOrder = [];
      this.NoAcceptOrder = [];
      this.NoEvaluateOrder = [];

      const { data: res } = await this.$http.get("/user/getDingdan/" + val);

      if (res.code == 200) {
        console.log(res);
        var orderList = res.data.dingdan;

        this.allOrder = res.data.dingdan;

        for (var i = 0; i < orderList.length; i++) {
          if (orderList[i].isPay == 0) {
            this.NoPayOrder.push(orderList[i]);
          } else if (orderList[i].isSend == 0) {
            this.NoDeliverOrder.push(orderList[i]);
          } else if (orderList[i].isAccept == 0) {
            this.NoAcceptOrder.push(orderList[i]);
          } else if (orderList[i].isAccept == 1) {
            this.NoEvaluateOrder.push(orderList[i]);
          }
          //   console.log(orderList[i]);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dingdan-card {
  width: 60%;
  margin: auto;
  position: relative;
  top: 100px;
}
.dingdan-table {
  // width: px;
  margin: auto;
}
.no-pay-dingdan-table {
  // width: 851px;
  margin: auto;
}
.no-deliver-dingdan-table {
  // width: 701px;
  margin: auto;
}
.no-accept-dingdan-table {
  // width: 851px;
  margin: auto;
}
.no-evaluate-dingdan-table {
  // width: 851px;
  margin: auto;
}
</style>>
